

<template>
  <div class="container-fluid">
		<div class="row">
			<div class="col-lg-3"></div>
			<div class="col-lg-6 bg-white">
				
		
				<div class="modal-content">
					<div class="modal-header">
						
						<h4 style="color: red">
							<span class="glyphicon glyphicon-lock"></span> Login
						</h4>
					</div>
					<div class="modal-body">
						<form role="form">
							<!-- 用户名 -->
							<div class="form-group">
								<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
								<input v-model="loginForm.username" type="text" class="form-control" id="usrname"
									placeholder="Enter name" />
							</div>
				
							<!-- 密码 -->
							<div class="form-group">
								<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
									Password</label>
								<input v-model="loginForm.password" type="password" class="form-control" id="psw"
									placeholder="Enter password" />
							</div>
              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> Remember me
                  </label>
                </div>
              </div>
							
							<!-- 确认登录 -->
							<button type="button" class="btn btn-default btn-success btn-block" @click="login">
								<span class="glyphicon glyphicon-off"></span> 登录
							</button>
						</form>
					</div>
					<div class="modal-footer">
            <small>没有账号?</small><router-link to="/regist">&nbsp;注册</router-link>
						<!-- <p>Forgot <a href="#">Password?</a></p> -->
					</div>
				
				</div>
			</div>
			<div class="col-lg-3"></div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },

  methods: {

    // 跳转到注册页面
    to_regist() {
      this.$router.push('/regist')
    },

    // 检查表单
    check(){
      if(this.loginForm.username.length==0){
        alert('请输入用户名')
        return false
      }
      if(this.loginForm.password.length==0){
        alert('请输入密码')
        return false
      }
      return true
    },

    // 验证登录
    login() {
      if(!this.check()){
        return
      }


      let formData = JSON.stringify(this.loginForm)

      this.$axios.post("/login", formData)
        .then(response => {
          console.log(response.data);
      
          if (response.data.code == "200") {
            alert(response.data.msg)
            //登录成功就跳转到首页
            
           var user_token = response.data.token;
            //存token到localStorage中
           localStorage.setItem("token", user_token);
            var uid = response.data.uid;
            localStorage.setItem("uid", uid);
            
            this.$router.push('/')
          } else {
            alert(response.data.msg)
          }
        })
        .catch(e => {
          alert("服务器出错")
          console.log(e);
        })
      //localStorage.setItem("token", user_token);
    }
  }

}

</script>


<style></style>